<script setup lang="ts">
  import { ref, useSlots, Slots } from 'vue'
  import { ElPopconfirm, ElButton } from 'element-plus'
  import { SIcon } from '@xtail/vue3'
  import { PopconfirmBtnPropsType } from './types'

  defineOptions({
    name: 'XPopconfirmBtn'
  })

  withDefaults(defineProps<PopconfirmBtnPropsType>(), {
    btnIcon: true,
    iconProps: {} as any,
    btnProps: {} as any,
    click: () => {},
    confirm: () => {},
    cancel: () => {},
    popconfirmProps: {} as any
  })

  const slots: Slots = useSlots()

  const elBtn = ref()
  defineExpose({
    elBtn
  })
</script>

<template>
  <el-popconfirm
    class="x-popconfirm-btn"
    v-bind="{
      title: '是否确认删除？',
      confirmButtonText: '确认',
      confirmButtonType: 'danger',
      cancelButtonText: '取消',
      ...popconfirmProps
    }"
    @confirm="(evt: MouseEvent) => confirm(evt)"
    @cancel="(evt: MouseEvent) => cancel(evt)"
  >
    <template #reference>
      <slot name="btn">
        <el-button
          ref="elBtn"
          v-bind="{
            ...btnProps,
            plain: btnProps?.plain ?? true
          }"
          @click="(evt: MouseEvent) => click(evt)"
        >
          <template v-if="btnIcon" #icon>
            <slot name="btn-icon">
              <s-icon v-bind="iconProps" />
            </slot>
          </template>
          <template v-if="btnText" #default>
            <slot name="btn-text">
              {{ btnText }}
            </slot>
          </template>
        </el-button>
      </slot>
    </template>
    <template v-if="slots['actions']" #actions>
      <slot name="actions" />
    </template>
  </el-popconfirm>
</template>

<style scoped lang="scss">
  @use './style' as *;
</style>
